<template>
  <div class="module">
    <div class="module-title">
      个性看板
      <div class="btn-right">
        <div v-if="selfCustom" class="el-btns">
          <el-button size="mini">清空</el-button>
          <el-button size="mini" type="primary">保存</el-button>
          <el-button size="mini" @click="selfCustom = false">取消</el-button>
        </div>
        <a v-else @click="selfCustom = true">自定义</a>
      </div>
    </div>
    <div class="module-body">
      <div v-if="selfCustom" class="add-custom">
        <a @click="jumpDialog">
          <i class="el-icon-plus" />
          添加图表
        </a>
      </div>
      <el-row :gutter="20">
        <el-col v-for="item in modules" v-show="item.visible" :key="item.title" :span="item.span">
          <div class="basic-card">
            <h3 class="title">{{ item.title }}</h3>
            <component :is="item.componentName" />
          </div>
        </el-col>
      </el-row>
    </div>
    <Dialog ref="dialog" />
  </div>
</template>

<script>
import { ref, reactive } from '@vue/composition-api'
import scatterModule from './scatterModule.vue'
import barStackModule from './barStackModule.vue'
import twoPieModule from './twoPieModule.vue'
import Dialog from './dialog.vue'
import module from './module.js'
export default {
  components: {
    scatterModule,
    barStackModule,
    twoPieModule,
    Dialog
  },
  setup(props, { refs }) {
    const selfCustom = ref(false)
    const jumpDialog = () => {
      console.log(refs.dialog)
      refs.dialog.init()
    }
    const modules = reactive(module)
    return {
      selfCustom,
      jumpDialog,
      modules
    }
  }
}
</script>

<style scoped lang="scss">
@import '~@/styles/variables';
.btn-right {
  margin-left: auto;
  a {
    font-size: 12px;
    margin-left: 10px;
  }
}
.add-custom {
  margin: 20px 0;
  a {
    display: block;
    width: 100%;
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
    border: 1px dashed $themeColor;
    i {
      margin-right: 5px;
    }
  }
}
.basic-card {
  margin-bottom: 20px;
}
::v-deep .module-card {
  margin-bottom: 15px;
}
</style>
